<template>
  <!-- 头部导航条 -->
  <div class="nav">
    <div class="nav-center">
      <!-- 导航条左侧 logo -->
      <div class="nav-center-left">
        <h1>
          <a href="index.html" title="美团购">
            <img src="../../assets/images/logo.png" />美团购
          </a>
        </h1>
      </div>
      <!-- 导航条右侧 -->
      <div class="nav-center-right">
        已有美团账号？
        <router-link to="/login">登录</router-link>
      </div>
    </div>
  </div>
  <!-- 注册表单区域 -->
  <div class="register">
    <div class="register-center">
      <div class="register-center-form">
        手机号码
        <input
          type="text"
          name="phone"
          placeholder="手机号"
          value="13600000000"
        >
        <span class="display-none">
          <i></i>
        </span>
        <br />
        <button @click="Random">免费获取短信动态码</button>
        <span class="display-none"> </span>
        <br />
        短信验证 <input type="text" id="code" value="4431" />
        <span class="display-none">
          <i class=""></i>
        </span>
        <br />
        创建密码
        <input
          type="password"
          id="password"
          placeholder="密码"
          value="111111"
        /><br />
        <div id="tips">
          <b></b>
          <b></b>
          <b></b>
          <b></b>
        </div>
        <p></p>
        确认密码
        <input
          type="password"
          id="repassword"
          placeholder="密码"
          value="111111"
        />
        <span class="display-none">
          <i></i>
        </span>
        <br />
        <input
          type="submit"
          id="frmContact"
          value="同意以下协议并注册"
          @click="enroll"
        />
        <br />
        <br />
        <a href="">《美团用户服务协议</a>
        <a href="">《美团隐私政策》</a>
        <!-- </form> -->
      </div>
      <div class="register-center-img"></div>
    </div>
  </div>
</template>

<script>
import { method } from 'lodash-es';
export default {
  name: "Enroll",
  // data() {
  //   return {
  //     phone: "",
  //     password: "",
  //     repassword: "",
  //   };
  // },
  data() {
    return {
      phone: '', //手机号
      code: '', //验证码
      password: '', //密码
      repassword: '', //确认密码
    }
  },
  methods: {
    // 获取验证码
    async getCode() {
      if (!this.phone) return
      try {
        await this.$store.dispatch('getCode', this.phone)
        // 让验证码显示
        this.code = this.$store.state.user.code
      } catch (error) {
        alert('获取验证码失败')
      }
    },
    // 完成注册
    async completeRegister() {
      let { phone, password, code, repassword, isAgree } = this
      // 验证用户是否全部符合验证规则
      // 返回值 是一个promise
      // 如果全部符合 是一个成功promise  成功promsie的值是true
      // 如果有一项不符合 是一个成功的promise 成功promsie的值是false
      const result = await this.$validator.validateAll()

      if (result) {
        try {
          await this.$store.dispatch('getRegisterUser', {
            phone,
            password,
            code,
          })
          // 跳转到登录页面
          this.$router.push('/login')
        } catch (error) {
          alert('注册用户失败')
        }
      }else{
        alert('请好好输入 保证每一个内容都符合规则！！！')
      }
    },
  },
};
</script>

<script setup>
import { enrollApi } from "../../api/enroll/enroll.js";

// const enroll = async () => {
//   await enrollApi({
//     phone: 13600000000,
//     password: 111111,
//   });
// };


</script>

<style scoped>
.nav {
  height: 100px;
}
.nav-center {
  height: 100px;
}
.nav-center-left {
  font-size: 0px;
  float: left;
}
.nav-center-left h1 a img {
  width: 126px;
  height: 46px;
  padding: 25px 0px 25px 40px;
}
.nav-center-right {
  padding-right: 170px;
  float: right;
  width: 150px;
  height: 20px;
  line-height: 20px;
  color: #666;
  margin-top: 40px;
}
.nav-center-right a {
  width: 44px;
  height: 20px;
  background-color: #ffd000;
  color: #000;
  display: inline-block;
  float: right;
  text-align: center;
}

.register {
  width: 100%;
  height: 550px;
  background-color: #f7f8f8;
}
.register-center {
  width: 1190px;
  height: 480px;
  background-color: #fff;
  margin: 0 auto;
  border: 1px solid #ccc;
}
.register-center-form {
  width: 550px;
  height: 480px;
  /* background-color: red; */
  /* border:1px solid #ccc; */
  margin-left: 70px;
  float: left;
}
.register-center-form input {
  width: 260px;
  height: 36px;
  border: 1px solid #aaa;
  margin: 20px 10px;
}
.register-center-form button {
  width: 180px;
  height: 20px;
  border: 1px solid #aaa;
  margin-left: 78px;
}
#frmContact {
  width: 180px;
  height: 40px;
  margin-left: 78px;
  border: 1px solid #ffbe00;
  background-color: #ffbe00;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0px;
}
.register-center-form a {
  color: #fe8c00;
  text-decoration: none;
  font-size: 13px;
  padding-left: 78px;
}
.register-center-form a:last-child {
  padding-left: 0px;
}
/*字体图标的颜色改变*/
.icon-times-circle {
  color: red;
}
.icon-check-circle {
  color: green;
}
/*禁用谷歌的默认选择效果*/
input,
textarea:focus {
  outline: none;
}
/*控制提示文字的显示隐藏*/
.display-none {
  display: none;
}
.display-block {
  display: block;
}
.display-inline {
  display: inline-block;
}
#tips {
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  width: 260px;
  border-right: 2px solid #fff;
  color: #fff;
  text-align: center;
  background: #eeeeee;
  margin-left: 60px;
}
#tips b {
  float: left;
  width: 63px;
  height: 20px;
  color: white;
  background: #eeeeee;
  margin-right: 2px;
  line-height: 20px;
  text-align: center;
}
#frmContact:hover {
  cursor: pointer;
}
input {
  padding-left: 10px;
  font-size: 14px;
}
</style>
